<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #drop {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
<div id="drop">drop container</div>
<script>
  const $drop = document.querySelector('#drop');

  $drop.addEventListener('dragover', (event) => {
    event.preventDefault()
    console.log('dragover')
  }, false);

  $drop.addEventListener('drop', (event) => {
    event.preventDefault()
    console.log('drop')
    console.log(event.dataTransfer.getData('data-source'))
  }, false);

  window.addEventListener('message', (event) => {
    console.log('children: => ', event)
  })
</script>
</body>
</html>